﻿
@{
    ViewBag.Title = "趣卡会员";
}
@section CSS{

}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            趣卡会员
            <small>列表</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">财务管理</a></li>
            <li class="active">趣卡会员列表</li>
        </ol>
    </section>
    <section>
        <div class="col-xs-12 ">
            <div class="box box-primary">
                <div class="box-body">
                    <div class="col-md-6 ">
                        <div class="info-box-content">
                            <span class="info-box-number"><small>总会员： </small>@ViewBag.vip_total</span>
                        </div>
                    </div>
                    <div class="col-md-3 ">
                        <div style="text-align:center;">
                            <span class="info-box-number">@ViewBag.vip_today</span>
                            <span class="info-box-text" style="color:#c2c1c1;">今日新增会员</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="col-xs-12">
            <div class="box box-primary ">
                <!-- form start -->
                <form class="form-horizontal">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="payNo" class="col-sm-2 control-label">支付单号</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="payNo" placeholder="支付单号">
                            </div>
                            @*<label for="RealName" class="col-sm-2 control-label">真实姓名</label>
                                <div class="col-sm-2">
                                    <input type="text" class="form-control" id="RealName" placeholder="真实姓名">
                                </div>*@
                        </div>
                        <div class="form-group">
                            <label for="userName" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="userName" placeholder="用户名">
                            </div>
                            <label for="RealName" class="col-sm-2 control-label">真实姓名</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="RealName" placeholder="真实姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="col-sm-2 control-label">支付方式</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="type">
                                    <option value="-1">-请支付方式-</option>
                                    <option value="1">余额</option>
                                    <option value="2">微信</option>
                                    <option value="3">支付宝</option>
                                    <option value="5">系统设定</option>
                                </select>
                            </div>
                            <label for="inputUName" class="col-sm-2 control-label">购买日期</label>
                            <div class="col-sm-2">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right" id="startTime">
                                </div>
                            </div>
                            <label style="float:left;"> - </label>
                            <div class="col-sm-2">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right" id="endTime">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer ">
                        <button type="button" class="btn btn-primary btn-search center-block" id="btnSearch"><i class="fa fa-search"></i> 查询</button>
                        @*<button type="button" class="btn btn-danger" id="btnDelMul"><i class="fa fa-remove"></i> 批量删除</button>
                            <button type="button" class="btn btn-info" id="btnAdd"><i class="fa fa-plus"></i> 添加</button>
                            <button type="button" class="btn btn-success" id="btnExport"><i class="fa fa-download"></i> 导出Excel</button>*@
                    </div>
                    <!-- /.box-footer -->
                </form>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    @*<div class="box-header">
                            &nbsp;
                        </div>*@
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="DataList" class="table table-bordered table-striped table-hover ">
                            <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>用户名</th>
                                    <th>真实姓名</th>
                                    <th>购买年限</th>
                                    <th>支付金额</th>
                                    <th>支付方式</th>
                                    <th>支付单号</th>
                                    <th>支付时间</th>
                                    <th>有效期</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@section JS{
    <script>
        $(function () {
            //初始化表格
            GenerateTable();
            //鼠标移动到该行变色
            $('.table-hover tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    u_table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
            //搜索事件
            $("#btnSearch").on("click", function () {
                u_table.fnDestroy();
                GenerateTable();
            });

            $('#startTime').datepicker({
                autoclose: true
            });

            $('#endTime').datepicker({
                autoclose: true
            });
        });
        //生成表格
        function GenerateTable() {
            u_table = $('#DataList').dataTable({
                "lengthChange": true,
                "searching": false,
                "ordering": false,
                "iDisplayLength": 10,
                "bProcessing": true,
                "bServerSide": true,
                "fnServerParams": function (aoData) {
                    var type = $("#type").val();
                    var datemin = $('#startTime').val();
                    var datemax = $("#endTime").val();
                    var payNo = $("#payNo").val();
                    var realName = $("#RealName").val();
                   var userName = $("#userName").val();
                    aoData.push(
                        { "name": "dateMin", "value": datemin },
                        { "name": "dateMax", "value": datemax },
                        { "name": "payNo", "value": payNo },
                       { "name": "userName", "value": userName },
                        { "name": "realName", "value": realName },
                        { "name": "type", "value": type }
                    );
                },
                "sAjaxSource": "/finance/UserVipList",
                "aoColumns": [
                    //{ "mDataProp": 'id' },
                    { "mDataProp": 'order_no' },
                    { "mDataProp": 'user_name' },
                    { "mDataProp": 'real_name' },
                    { "mDataProp": 'buy_year' },
                    { "mDataProp": 'amount' },
                    {
                         "mDataProp": 'pay_type', "mRender": function (data, type, full) {
                             return data == 1 ? "余额" : (data == 2 ? "微信" : (data == 3 ? "支付宝" : (data == 5 ? "系统设定" : "")));
                         }
                     },
                    { "mDataProp": 'pay_no' },
                     {
                         "mDataProp": 'pay_time', "mRender": function (data, type, full) {
                             return data == null ? "" : moment(data).format("YYYY-MM-DD");
                         }
                     },
                    {
                        "mDataProp": 'start_time', "mRender": function (data, type, full) {
                             return (data == null ? "" : moment(data).format("YYYY-MM-DD")) + "</br>" + (full.end_time == null ? "" : moment(full.end_time)).format("YYYY-MM-DD");
                        }
                    }
                ]
            });
        }

    </script>
}


